<template>
  <el-header style="padding: 0" height="90px">
    <div class="header">
      <div class="bgBox flex-x-between-start">
        <div class="nav navL flex-x-between">
          <div
            class="navItem"
            :class="isCurrentTab(path) ? 'active' : ''"
            v-for="({ name, path }, index) in tabList"
            :key="index"
            @click="goTab(path)"
          >
            {{ name }}
          </div>
        </div>
        <div class="title flex-x-center">
          {{ title }}
        </div>
        <div class="nav navr flex-x-between">
          <div class="navItem">首页</div>
          <div class="navItem">救援详情</div>
          <div class="navItem">头部菜单</div>
        </div>
      </div>
      <div class="shadow title">{{ title }}</div>
    </div>
  </el-header>
</template>
<script setup lang="ts">
import { ref } from "vue";
import { useRouter, useRoute } from "vue-router";

const router = useRouter();
const route = useRoute();
let title = ref<string>("华西120急救指挥中心");

const tabList = ref([
  { name: "首页", path: "/home" },
  { name: "救援详情", path: "/rescue" },
  { name: "救援详情1", path: "/rescue1" }
]);

const goTab = (path: string) => {
  router.replace(path);
};
const isCurrentTab = (path: string) => {
  return route.path.includes(path.split("?")[0]);
};
</script>
<style scoped lang="scss">
.header {
  height: 100%;
  width: 100%;
  margin: 0 30px;
  overflow: hidden;
  position: relative;
  .nav {
    flex: 1;
    .navItem {
      flex: 1;
      text-align: center;
      color: #c3e1ff;
      font-size: 20px;
      line-height: 60px;
      height: 60px;
      cursor: pointer;
      margin: 0 4px;
      &.active {
        background-image: url("../../../assets/images/home/nav.png");
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
      }
    }
  }
  .bgBox {
    height: 100%;
    background-image: url("../../../assets/images/home/titleBg.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    position: relative;
    z-index: 1;
  }
  .title {
    width: 790px;
    margin: 0 75px;
    letter-spacing: 13px;
    line-height: 60px;
    text-align: center;
    font-size: 36px;
    color: #ffffff;
    text-shadow: 0px 2px 14px rgba(0, 121, 177, 0.88);
  }
  .shadow {
    height: 20px;
    margin: 0;
    line-height: 0;
    position: absolute;
    overflow: hidden;
    bottom: 13px;
    left: 50%;
    transform: translateX(-50%) rotateX(180deg);
    opacity: 0.4;
    transform-style: preserve-3d;
    text-align: center;
  }
}
</style>
